<template>
  <view class="user">
    <view class="user-info">
      <image src="/static/images/ic_user_photo.png" class="user-info-photo" />
      <view class="user-info-name"> {{ userInfoStore.userId ? userInfoStore.nickName : '欢迎进入' }} </view>
      <view class="user-info-login" @click="handleLogin" v-if="!userInfoStore.userId">立即登录</view>
    </view>
    <view class="user-menu">
      <view class="user-menu-item" @click="handleOrder">
        <image class="user-menu-item-img" src="/static/images/ic_order.png" />
        <view class="user-menu-item-label">我的订单</view>
        <uni-icons type="forward" size="16" color="#545567"></uni-icons>
      </view>
      <view class="user-menu-item" @click="handleStudent">
        <image class="user-menu-item-img" src="/static/images/ic_student2.png" />
        <view class="user-menu-item-label">学生信息</view>
        <uni-icons type="forward" size="16" color="#545567"></uni-icons>
      </view>
      <view class="user-menu-item">
        <image class="user-menu-item-img" src="/static/images/ic_kflt.png"></image>
        <button class="user-menu-item-label-1" open-type="contact" style="
            background: transparent;
            border-color: transparent;
            text-align: left;
            margin: 0;
            margin-left: 32rpx;
            padding: 0;
          ">联系客服
        </button>
        <uni-icons type="forward" size="16" color="#545567"></uni-icons>
      </view>
      <view class="user-menu-item" @click="handleKfdh">
        <image class="user-menu-item-img" src="/static/images/ic_kfdh.png"></image>
        <view class="user-menu-item-label">客服电话</view>
        <uni-icons type="forward" size="16" color="#545567"></uni-icons>
      </view>
      <view class="user-menu-item" v-if="userInfoStore.userId" @click="handleLogout">
        <image class="user-menu-item-img" src="/static/images/ic_exit.png" />
        <view class="user-menu-item-label-2">退出登录</view>
      </view>
    </view>
  </view>
</template>

<script setup>

import { toPage } from '@/utils/app';

import { useUserInfoStore } from '@/stores/user';
const userInfoStore = useUserInfoStore();

// 登录
const handleLogin = () => {
  uni.redirectTo({
    url: '/pages/user/wxLogin?fromPage=user',
  });
}

// 订单
const handleOrder = () => {
  if (!userInfoStore.userId) {
    return handleLogin()
  } else {
    toPage('/pages/order/index')
  }
}

//学生
const handleStudent = () => {
  if (!userInfoStore.userId) {
    return handleLogin()
  } else {
    toPage('/pages/user/StudentList?source=user')
  }
}

const handleKfdh = () => {
  uni.makePhoneCall({
    phoneNumber: '18000275880  ',
    fail(err) {
      console.log('makePhoneCall出错', err);
    },
  });
}

// 退出
const handleLogout = () => {
  uni.showModal({
    title: '',
    content: '您确定要退出吗？',
    success: function (res) {
      if (res.confirm) {
        userInfoStore.logout();
        uni.switchTab({
          url: '/pages/index/mall',
        });
      } else if (res.cancel) {
      }
    },
  });
}

</script>


<style scoped lang="scss">
.user {
  display: flex;
  flex-direction: column;

  .user-info {
    padding: 128rpx 32rpx 32rpx 32rpx;
    display: flex;
    align-items: center;
    background: linear-gradient(138.98deg, #e9b5b5 0.5%, #df9495 100.24%);

    .user-info-photo {
      width: 120rpx;
      height: 120rpx;
      border-radius: 50%;
      border: 1rpx solid #fff;
    }

    .user-info-name {
      flex: 1;
      font-family: PingFangSC, PingFang SC;
      font-weight: 600;
      font-size: 26rpx;
      color: #fff;
      margin-left: 32rpx;
    }

    .user-info-login {
      width: 200rpx;
      height: 76rpx;
      background: #ffffff;
      border-radius: 38rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: 600;
      font-size: 32rpx;
      color: #c61323;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }

  .user-menu {
    display: flex;
    flex-direction: column;
    margin: 24rpx 24rpx 0rpx 24rpx;
    padding: 0rpx 24rpx;
    border-radius: 16rpx;
    background: #ffffff;

    .user-menu-item {
      display: flex;
      align-items: center;
      height: 120rpx;
      border-bottom: 1rpx solid #EEEEEE;

      .user-menu-item-img {
        width: 40rpx;
        height: 40rpx;
      }

      .user-menu-item-label {
        flex: 1;
        margin-left: 32rpx;
        color: #1f242e;
        font-family: PingFang SC;
        font-size: 32rpx;
      }

      .user-menu-item-label-1 {
        flex: 1;
        margin-left: 32rpx;
        color: #1f242e;
        font-family: PingFang SC;
        font-size: 32rpx;
      }

      .user-menu-item-label-1::after {
        border: none;
      }

      .user-menu-item-label-2 {
        flex: 1;
        margin-left: 32rpx;
        color: #c61323;
        font-family: PingFang SC;
        font-size: 32rpx;
      }
    }

    .user-menu-item:last-child {
      border-bottom: none;
    }
  }
}
</style>
